<template>
    <div class="table-box">
        <div class="table-search">
            <el-form :inline="true" :model="form">
                <el-form-item label="时间">
                    <el-date-picker v-model="form.date_at" type="date" placeholder="日期" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onQuery">查询</el-button>
                    <el-button @click="onReset">重置</el-button>
                    <el-button type="primary" plain @click="onExport">导出</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="card content-box">
            <div class="table">
                <el-table :data="tableData" border v-loading="loading">
                    <el-table-column prop="date_at" label="日期" align="center" width="110" />
                    <el-table-column prop="register_user" label="注册人数" align="center" />
                    <el-table-column prop="login_count" label="登录次数" align="center" />
                    <el-table-column prop="login_user" label="登录人数" align="center"  />
                    <el-table-column prop="recharge_count" label="充值次数" align="center" />
                    <el-table-column prop="recharge_user" label="充值人数" align="center" />
                    <el-table-column prop="recharge_amount" label="充值金额累计" align="center" />
                    <el-table-column prop="recharge_usd" label="充值美元累计" align="center" />
                    <el-table-column prop="first_recharge_user" label="首次充值人数" align="center" />
                    <el-table-column prop="first_recharge_amount" label="首次充值金额累计" align="center" />
                    <el-table-column prop="first_recharge_usd" label="首次充值美元累计" align="center" />
                    <el-table-column prop="start_live_count" label="开播次数" align="center" />
                    <el-table-column prop="start_live_user" label="开播人数" align="center" />
                    <el-table-column prop="live_gift_count" label="直播送礼次数" align="center" />
                    <el-table-column prop="live_gift_user" label="直播送礼人数" align="center" />
                    <el-table-column prop="live_diamond" label="直播消耗钻石累计" align="center" />
                    <el-table-column prop="start_game_count" label="启动游戏次数" align="center" />
                    <el-table-column prop="start_game_user" label="启动游戏人数" align="center" />
                    <el-table-column prop="exchange_diamond" label="兑换钻石累计" align="center" />
                    <el-table-column prop="exchange_gold" label="兑换金币累计" align="center" />
                    <el-table-column prop="checkin_count" label="签到次数" align="center" />
                    <el-table-column prop="checkin_user" label="签到人数" align="center" />
                    <el-table-column prop="checkin_diamond" label="签到钻石累计" align="center" />
                    <el-table-column prop="task_count" label="任务次数" align="center" />
                    <el-table-column prop="task_user" label="任务人数" align="center" />
                    <el-table-column prop="task_diamond" label="任务钻石累计" align="center" />
                    <el-table-column prop="withdraw_count" label="提现次数" align="center" />
                    <el-table-column prop="withdraw_user" label="提现人数" align="center" />
                    <el-table-column prop="withdraw_diamond" label="提现绿钻累计" align="center" />
                    <el-table-column prop="withdraw_usd"  label="提现美元累计" align="center" />
                    <el-table-column prop="duobao_count" label="夺宝次数" align="center" />
                    <el-table-column prop="duobao_user" label="夺宝人数" align="center" />
                    <el-table-column prop="lottery_count" label="转盘抽奖次数" align="center" />
                    <el-table-column prop="lottery_user" label="转盘抽奖人数" align="center" />
                    <el-table-column prop="moment_count" label="发布动态次数" align="center" />
                    <el-table-column prop="moment_user" label="发布动态人数" align="center" />
                    <el-table-column prop="comment_count" label="动态评论次数" align="center" />
                    <el-table-column prop="comment_user" label="动态评论人数" align="center" />
                    <el-table-column prop="like_count" label="动态点赞次数" align="center" />
                    <el-table-column prop="like_user" label="动态点赞人数" align="center" />
                </el-table>
                <div class="table-pagination">
                    <el-pagination :current-page="pageable.pageNum" :page-size="pageable.pageSize"
                        :page-sizes="[10, 25, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                        :total="pageable.total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { exportOrDownload } from "@/utils/utils";
import { statsDailyApi } from "@/api/moby/stats/stats";

const loading = ref(false);
const tableData = ref([]);
const formData = {
    date_at: '',
    export: '',
};
const form = reactive({ ...formData });
const pageable = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0
});

//参数
const param = () => {
    return {
        page: pageable.pageNum,
        pagesize: pageable.pageSize,
        date_at: form.date_at,
    };
};

// 获取表格数据
const getTbaleData = async () => {
    loading.value = true;
    try {
        const res = await statsDailyApi(param());
        loading.value = false;
        tableData.value = res.data.results;
        pageable.total = res.data.count;
    } catch (error) {
        loading.value = false;
    }
};
//查询
const onQuery = async () => {
    getTbaleData();
};
// 重置
const onReset = () => {
    Object.assign(form, formData);
    getTbaleData();
};
// 导出
const onExport = async () => {
    const data = Object.assign(param(), { export: 1, pagesize: 9999999 });
    const res = await statsDailyApi(data, "blob");
    exportOrDownload(res, "Metafun-每日统计");
};

// 条数
const handleSizeChange = number => {
    pageable.pageSize = number;
    getTbaleData();
};

// 页码
const handleCurrentChange = number => {
    pageable.pageNum = number;
    getTbaleData();
};
onMounted(() => {
    getTbaleData();
});
</script>
  